

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { FontAwesome6 } from '@expo/vector-icons';
import styles from './styles';

interface SettingItemProps {
  title: string;
  description: string;
  icon: string;
  iconColor: string;
  iconBgColor: string;
  onPress: () => void;
  rightContent?: React.ReactNode;
}

const SettingItem: React.FC<SettingItemProps> = ({
  title,
  description,
  icon,
  iconColor,
  iconBgColor,
  onPress,
  rightContent,
}) => {
  return (
    <TouchableOpacity 
      style={styles.container} 
      onPress={onPress}
      activeOpacity={0.8}
    >
      <View style={styles.content}>
        <View style={styles.leftSection}>
          <View style={[styles.iconContainer, { backgroundColor: iconBgColor }]}>
            <FontAwesome6 name={icon} style={[styles.icon, { color: iconColor }]} />
          </View>
          <View style={styles.textContainer}>
            <Text style={styles.title}>{title}</Text>
            <Text style={styles.description}>{description}</Text>
          </View>
        </View>
        <View style={styles.rightSection}>
          {rightContent || (
            <FontAwesome6 name="chevron-right" style={styles.chevronIcon} />
          )}
        </View>
      </View>
    </TouchableOpacity>
  );
};

export default SettingItem;

